<style lang="scss">
  @import '../../styles/variables';

  $tagArrColor: (
    "alive":#333,
    "disabled":#f56c6c,
    "extra":#e6a23c,
    "lost":#409eff
  );
  .page-main {
    @each $key, $value in $tagArrColor {
      .row-status-#{$key} {
        color: $value;
        background-color: rgba($value, 0.10);
      }

    }
    .row-status-alive {
      background: transparent;
    }
  }

</style>
<template>
  <div class="page-main">
    <div class="list-bar-tools">
      <div class="flex">
        <el-button-group>
          <el-button type="primary" size="mini" icon="el-icon-upload2" @click.stop="makeSnapShot">生成快照</el-button>
        </el-button-group>
        <div style="margin-left:20px">
          <el-tag v-for="type in typeColorArr" :key="type.type" :class="'row-status-'+type.type"
                  style="margin-left:5px;" size="small">
            {{type.title}}
          </el-tag>
        </div>
      </div>
      <div>
        <el-input placeholder="" v-model="searchKey" size="mini"
                  clearable="">
          <template slot="prepend">节点名</template>
        </el-input>
      </div>
    </div>
    <el-table
      :data="showNodeList"
      border
      style="width: 100%"
      :row-class-name="getItemClass">
      <el-table-column
        prop="nodeName"
        label="节点名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="ip"
        label="IP地址">
      </el-table-column>
      <el-table-column
        prop="port"
        label="服务端口">
      </el-table-column>
      <el-table-column
        prop="version"
        label="版本">
      </el-table-column>
      <el-table-column
        prop="weight"
        label="权重">
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          <el-tag size="mini"
                  :type="scope.row.enable ? 'success' : 'danger'"
                  close-transition>{{scope.row.status}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作" width="280">
        <template slot-scope="scope">
          <router-link :to="'/nodes/'+scope.row.fullNodeName+'/service'">
            <el-tooltip class="item" effect="dark" content="服务详情" placement="top-end">
              <el-button icon="el-icon-t-service" size="mini" type="primary" circle plain></el-button>
            </el-tooltip>
          </router-link>
          <router-link :to="'/nodes/'+scope.row.fullNodeName+'/status'">
            <el-tooltip class="item" effect="dark" content="连接状态" placement="top-end">
              <el-button icon="el-icon-t-status" size="mini" type="primary" circle plain></el-button>
            </el-tooltip>
          </router-link>
          <router-link :to="'/nodes/'+scope.row.fullNodeName+'/statics'">
            <el-tooltip class="item" effect="dark" content="服务统计" placement="top-end">
              <el-button icon="el-icon-t-statics" size="mini" type="primary" circle plain></el-button>
            </el-tooltip>
          </router-link>

          <el-tooltip class="item" effect="dark" content="禁用" placement="top-end" v-if="scope.row.enable">
            <el-button type="danger" icon="el-icon-t-stop" size="mini" circle plain
                       @click="changeEnable(scope.row)"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="启用" placement="top-end" v-else="">
            <el-button type="success" icon="el-icon-t-start" size="mini" circle plain
                       @click="changeEnable(scope.row)"></el-button>
          </el-tooltip>

        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 50, 100]"
        :page-size="filter.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="nodeCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import utils from '@/utils/utils';
  import {nodeService} from '@/api/index';
  import {mapGetters} from 'vuex';

  export default {
    data() {
      return {
        searchKey: '',
        filter: {
          pageNo: 1,
          pageSize: 10,
          start: 0,
          order: '',
          sort: 'desc'
        },
        nodeCount: 0,
        nodeList: [],
        showNodeList: [],
        webFilter: '',
        typeColorArr: [
          {
            type: 'alive',
            title: '正常'
          },
          {
            type: 'disabled',
            title: '禁用'
          },
          {
            type: 'extra',
            title: '额外'
          },
          {
            type: 'lost',
            title: '丢失'
          }
        ]
      };
    },
    computed: {},
    watch: {
      'filter': {
        handler: function () {
          this.getNodeList();
        },
        deep: true,
        immediate: true
      },
      webFilter() {
        this.filterList();
      },
      searchKey() {
        this.filterKeys();
      },
      nodeList() {
        this.filterKeys();
      }
    },
    components: {},
    methods: {
      filterKeys() {
        this.showNodeList = this.nodeList.filter(item => {
          return !this.searchKey || item.nodeName.indexOf(this.searchKey) !== -1;
        });
      },
      handleCurrentChange(currentPageNo) {
        this.filter.start = (currentPageNo - 1) * this.filter.pageSize;
      },
      handleSizeChange(pageSize) {
        this.filter.pageSize = pageSize;
        localStorage.setItem('node-page-size', pageSize);
      },

      getNodeList() {
        nodeService.getPage(this.filter).then(res => {
          this.nodeCount = res.data.total;
          this.nodeList = res.data.rows;
        });
      },
      getItemClass({row, rowIndex}) {
        return 'row-status-' + row.type;
      },
      changeEnable(item) {
        if (item.enable === true) {
          this.$confirm('是否要禁用节点', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            nodeService.nodeDisable(item.fullNodeName).then(res => {
              this.getNodeList();
            });
          });

        } else {
          this.$confirm('是否要启用节点', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            nodeService.nodeAble(item.fullNodeName).then(res => {
              this.getNodeList();
            });
          });

        }
      },
      makeSnapShot() {
        this.$confirm('是否要生成快照', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          nodeService.makeSnapShot().then(res => {
            this.$message('生成成功');
            this.getNodeList();
          });
        });
      }
    },
    created() {
      let oldPageSize = localStorage.getItem('node-page-size');
      if (!oldPageSize) {
        oldPageSize = 10;
      }
      this.filter.pageSize = Math.floor(oldPageSize);
    },
    mounted() {

    }
  };
</script>
